<template>
  <div ref="chart" style="height: 300px"/>
</template>

<script>
import * as echarts from 'echarts'
import {getLoginCount} from "@/api/index.js";


export default {
  name: 'indexLoginCount',
  data() {
    return {}
  },
  mounted() {
    this.initLoginCountEchart()
  },
  methods: {
    initLoginCountEchart() {
      let loginCountEchart = echarts.init(this.$refs.chart);
      getLoginCount().then(response => {
        setOption(response, loginCountEchart);
      });
    }
  }
}

function setOption(response, loginCountEchart) {
  let option = {
    title: {
      text: '当天时间段登录人次'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['登录成功次数', '登录失败次数', '退出次数', '注册人数']
    },
    xAxis: [
      {
        type: 'category',
        data: response.x
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '登录成功次数',
        type: 'line',
        smooth: true,
        data: response.y
      },
      {
        name: '登录失败次数',
        type: 'line',
        smooth: true,
        data: response.y2
      },
      {
        name: '退出次数',
        type: 'line',
        smooth: true,
        data: response.y3
      },
      {
        name: '注册人数',
        type: 'line',
        smooth: true,
        data: response.y4
      }
    ]
  }
  loginCountEchart.setOption(option);

}

</script>